<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—巡检条目"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LSelect label="设备类型" :value="type" :options="option1" @selected-event="getNewSelected"></LSelect>
      <LInput label="步骤名称" v-model="name" style="margin-left: 20px"></LInput>
      <LButton label="+新增" style="margin-left: 16px" @click="repairDialog = true"></LButton>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData1" style="width: 100%" :default-sort="{prop:'a',order:'acsending'}" border>
      <el-table-column prop="a" label="步骤编码" width="180" sortable />
      <el-table-column prop="b" label="步骤名称" width="180" />
      <el-table-column prop="c" label="设备分类" />
      <el-table-column prop="d" label="步骤描述" />
      <el-table-column prop="e" label="参考关系" />
      <el-table-column prop="f" label="步骤参考值" />
      <el-table-column prop="g" label="备注" />
      <el-table-column label="操作" width="150">
        <template #default>
          <el-button type="primary" size="mini" @click="repairDialog2 = true">编辑</el-button>
          <el-button type="danger" size="mini" @click="del">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="新增" width="40%" @close="repairDialogClose">
        <el-form label-width="100px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="small">
          <div class="row-1">
            <el-form-item label="步骤编码" prop="no" style="width:100%">
              <el-input v-model="repairForm.no"></el-input>
            </el-form-item>
            <el-form-item label="步骤名称" prop="name" style="width:100%">
              <el-input v-model="repairForm.name"></el-input>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="设备分类" prop="type" style="width:100%">
              <el-select v-model="repairForm.type">
                <el-option label="冷水机组" value="1"></el-option>
                <el-option label="冷水机组2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参考关系" prop="guanxi" style="width:100%">
              <el-select v-model="repairForm.guanxi">
                <el-option label=">" value="1"></el-option>
                <el-option label="<" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="参考值" prop="cankaizhi" style="width:100%">
              <el-input v-model="repairForm.cankaozhi"></el-input>
            </el-form-item>
          </div>
          <div style="padding: 0 2vw 0 0">
            <el-form-item label="步骤描述" prop="describe" style="width:100%">
              <el-input v-model="repairForm.describe" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="mark" style="width:100%">
              <el-input v-model="repairForm.mark" type="textarea"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">新增</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog2" title="编辑" width="40%" @close="repairDialog2Close">
        <el-form label-width="100px" :model="repairForm2" ref="repairForm2Ref" :rules="repairForm2Rules" size="small">
          <div class="row-1">
            <el-form-item label="步骤编码" prop="no" style="width:100%">
              <el-input v-model="repairForm2.no" disabled></el-input>
            </el-form-item>
            <el-form-item label="步骤名称" prop="name" style="width:100%">
              <el-input v-model="repairForm2.name"></el-input>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="设备分类" prop="type" style="width:100%">
              <el-select v-model="repairForm.type" filterable>
                <el-option label="冷水机组" value="1"></el-option>
                <el-option label="冷水机组2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参考关系" prop="guanxi" style="width:100%">
              <el-select v-model="repairForm.guanxi" filterable>
                <el-option label=">" value="1"></el-option>
                <el-option label="<" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="row-1">
            <el-form-item label="参考值" prop="cankaizhi" style="width:100%">
              <el-input v-model="repairForm2.cankaozhi"></el-input>
            </el-form-item>
          </div>
          <div style="padding: 0 2vw 0 0">
            <el-form-item label="步骤描述" prop="describe" style="width:100%">
              <el-input v-model="repairForm2.describe" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="mark" style="width:100%">
              <el-input v-model="repairForm2.mark" type="textarea"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn2">保存</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";
import LSelect from "@/components/LSelect.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
    LSelect,
  },
  data() {
    return {
      name: "",
      type: "1",

      option1: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "冷水机组",
        },
        {
          value: "3",
          label: "循环水泵",
        },
        {
          value: "4",
          label: "冷却塔",
        },
        {
          value: "5",
          label: "电动阀门",
        },
        {
          value: "6",
          label: "空调箱",
        },
        {
          value: "7",
          label: "变压器",
        },
      ],
      tableData1: [
        {
          a: "02",
          b: "检查机组运行噪声",
          c: "冷水机组",
          d: "检查空调机组运转时声音和震动是否正常",
          e: "是/否",
          f: "运行声音或震动是否正常",
          g: "",
        },
      ],

      repairDialog: false,
      repairForm: {
        no: "",
        name: "",
        type: "",
        guanxi: "",
        cankaozhi: "",
        describe: "",
        mark: "",
      },
      repairDialog2: false,
      repairForm2: {
        no: "",
        name: "",
        type: "",
        guanxi: "",
        cankaozhi: "",
        describe: "",
        mark: "",
      },
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //获取设备类型
    getNewSelected(m) {
      this.type = m;
    },
    //清空筛选条件
    clearSelected() {
      console.log("点击清空按钮");
      this.name = "";
      this.type = "1";
    },
    //删除数据按钮
    del() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-dialog .el-select {
  width: 242.8px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;
}
</style>
